import {
    FileImageOutlined,
    PaperClipOutlined,
} from '@ant-design/icons';
import {
    LightFilter,
    PageContainer,
    ProColumns,
    ProFormDateRangePicker,
} from '@ant-design/pro-components';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { Button, Cascader, Flex, Input, Popover, Space, Spin, Tag } from 'antd';
import moment from 'moment';
import RcResizeObserver from 'rc-resize-observer';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';
import DetailsMasses from './DetailMasses';
import AddMasses from './AddMasses';
import { pageMasses } from '@/services/api/api-masses';
const TableMasses: React.FC = () => {
    const access = useAccess();

    const [width, setWidth] = useState(500);

    const actionRef = useRef<ActionType>();

    /**
     * 搜索参数
     */
    const [queryParam, setQueryParamState] = useState({});


    const columns: ProColumns<MassesData.MassesPage>[] = [
        {
            title: '标题',
            dataIndex: 'title',
            // copyable: true,
            search: false,
            ellipsis: true,
            width: '300px',
            align: 'center',
            key: 'title',
            render: (dom, record, _index, action) => {
                return (
                    <div
                        style={{
                            textAlign: 'left',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                        }}
                    >
                        {record.isImage === 1 ? <FileImageOutlined /> : <></>}
                        {record.isFile === 1 ? <PaperClipOutlined /> : <></>}
                        <DetailsMasses
                            id={record.id}
                            name={record.title}
                            onRefurbish={() => {
                                actionRef?.current?.reload();
                            }}
                        />
                    </div>
                );
            },
        },
        // {
        //     title: '爆料人',
        //     dataIndex: 'name',
        //     // copyable: true,
        //     search: false,
        //     ellipsis: true,
        //     width: '300px',
        //     align: 'center',
        //     key: 'content',
        // },
        {
            title: '内容',
            dataIndex: 'content',
            // copyable: true,
            search: false,
            ellipsis: true,
            width: '300px',
            align: 'center',
            key: 'content',
        },
        {
            title: '爆料日期',
            dataIndex: 'createdTime',
            key: 'createdTime',
            width: '120px',
            align: 'center',
            search: false,
        },
        {
            title: '爆料日期',
            dataIndex: 'createdTimes',
            key: 'createdTimes',
            valueType: 'dateRange',
            hideInTable: true,
            fieldProps: {
                allowClear: true,
                placeholder: ['开始日期', '结束日期'],
                format: 'YYYY-MM-DD',
                ranges: {
                    今日: [moment(), moment()],
                    本月: [moment().startOf('month'), moment().endOf('month')],
                    上月: [
                        moment().startOf('month').subtract(1, 'months'),
                        moment().endOf('month').subtract(1, 'months'),
                    ],
                    最近7天: [moment().subtract(6, 'days'), moment()],
                    最近60天: [moment().subtract(59, 'days'), moment()],
                    最近90天: [moment().subtract(89, 'days'), moment()],
                },
            },
        },
    ];

    return (
        <RcResizeObserver
            key="resize-observer"
            onResize={(size) => {
                setWidth(size.width);
            }}
        >
            <PageContainer
                header={{
                    title: (
                        <span
                            style={{
                                marginInlineEnd: '12px',
                                color: 'rgba(0, 0, 0, 0.88)',
                                fontWeight: 600,
                                fontSize: 20,
                                height: 48,
                                paddingRight: 35,
                            }}
                            title="群众爆料"
                        >
                            群众爆料
                        </span>
                    ),
                    breadcrumb: {
                        items: [],
                    },
                    style: {
                        paddingBlockEnd: 0,
                    },
                    extra: [
                        (
                            <AddMasses
                                triggerMode='button'
                                key="add_active"
                                onRefurbish={() => {
                                    actionRef.current?.reload();
                                }}
                            />
                        ),
                    ],
                }}
            >
                <ProTable<MassesData.MassesPage>
                    columns={columns}
                    actionRef={actionRef}
                    request={async (params = {}) => {
                        const response = await pageMasses({
                            createdSource: 1,
                            ...queryParam,
                            ...params,
                        });

                        return Promise.resolve({
                            data: response.data.data,
                            total: response.data.total,
                            success: response.code === 0,
                        });
                    }}
                    rowKey="id"
                    dateFormatter="string"
                    bordered
                    search={false}
                    sticky
                    ghost
                    pagination={{
                        showQuickJumper: true,
                        showSizeChanger: true,
                        defaultPageSize: 20,
                    }}
                    headerTitle={
                        <div
                            style={{
                                display: 'flex',
                                width:500
                            }}
                        >
                            <Input.Search
                                placeholder="查询标题"
                                enterButton="搜索"
                                allowClear
                                style={{ maxWidth: 550, width: '100%' }}
                                onChange={(e) => {
                                    setQueryParamState({ ...queryParam, title: e.target.value });
                                }}
                                onSearch={(value) => {
                                    actionRef.current?.reset();
                                }}
                            />
                        </div>
                    }
                    toolbar={{
                        filter: (
                            <LightFilter
                                onValuesChange={(value) => {
                                    setQueryParamState(value);
                                    actionRef?.current?.reset();
                                }}
                            >
                                <ProFormDateRangePicker
                                    name="createdTimes"
                                    label="爆料日期"
                                    allowClear
                                    fieldProps={{
                                        allowClear: true,
                                        placeholder: ['开始日期', '结束日期'],
                                        format: 'YYYY-MM-DD',
                                        ranges: {
                                            今日: [moment(), moment()],
                                            本月: [moment().startOf('month'), moment().endOf('month')],
                                            上月: [
                                                moment().startOf('month').subtract(1, 'months'),
                                                moment().endOf('month').subtract(1, 'months'),
                                            ],
                                            最近7天: [moment().subtract(6, 'days'), moment()],
                                            最近60天: [moment().subtract(59, 'days'), moment()],
                                            最近90天: [moment().subtract(89, 'days'), moment()],
                                        },
                                    }}
                                />
                            </LightFilter>
                        ),
                    }}
                />
            </PageContainer>
        </RcResizeObserver>
    );
};
export default TableMasses;
